import { ElMessage } from 'element-plus';
import { defineStore } from 'pinia';
import { componentsData, anm } from '../mock';
export const userCanvasStore = defineStore({//需要注意的是，defineStore返回的是一个回调方法
    id: 'canvas',//test是该状态管理的唯一标志也可以使用defineStore(id,{});的形式
    state() {
        return {
            canvasInfo: {
                x: 1070,
                y: 615,
            }
        }
    },
})

export const userToolbarStore = defineStore({
    id: "canvas_edit",
    state() {
        return {
            // 移动的数据
            componentsList: [],
            // 侧边栏左下角数据
            componentleftList: [],
            // 右侧属性数据
            styleItem: {
                style: {}
            },
            // 动画
            anm,
            // 侧边栏数据
            componentsData: componentsData,
            // 保存撤销记录
            backOutList: []
        }
    },
    actions: {
        // 添加数据
        addItemCom(item) {
            //区分层级
            item.index = this.componentleftList.length
            this.componentsList.push(item)
            this.componentleftList.unshift(item)
        },
        // 删除
        removeItem(id) {
            const listIndex = this.componentsList.findIndex(item => item.id === id)
            this.componentsList.splice(listIndex, 1)

            const leftIndex = this.componentleftList.findIndex(item => item.id === id)
            this.componentleftList.splice(leftIndex, 1)
        },
        // 上移
        upMove(id) {
            const index = this.componentsList.findIndex(item => item.id === id)
            if (index === this.componentleftList.length - 1) {
                ElMessage.warning('已经在最上面了')
            } else {
                // 保存原来的
                const temp = this.componentsList[index]
                temp.index = this.componentsList[index + 1].index
                this.componentsList[index + 1].index = temp.index
            }
        },
        // 选中元素查看侧边栏
        selectItem(id) {
            const item = this.componentsList.find(item => item.id === id)
            this.styleItem = JSON.parse(JSON.stringify(item))
            this.componentsList = this.componentsList.map(item => {
                if (item.id === id) {
                    return this.styleItem
                } else {
                    return item
                }
            })
        },
        addAnimateItem(item) {
            this.styleItem.style.animate.push(item)
        },
        // 添加事件
        addEvents({ id, val, type }) {
            this.styleItem.event.push({
                val,
                type
            });
            const item = this.componentsList.find((item) => item.id === id);
            this.styleItem = JSON.parse(JSON.stringify(item))
            // 原来原数组的属性
            this.componentsList = this.componentsList.map((item) => {
                if (item.id === id) {
                    return this.styleItem;
                } else {
                    return item
                }
            })
        },
        // 添加撤销记录
        addBackOut(item) {
            this.backOutList.push(item)
        }
    }
})